<template>
  <div>
    <div class="gonn">
      <ul class="tobu">
        <li class="daohantilti">
          <ul>
            <li>操作</li>
            <li>标题</li>
            <li>歌手</li>
            <li>专辑</li>
            <li>时间</li>
            <li>热度</li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="geqlbiao">
      <ul class="tobu">
        <li class="daohantilti">
          <ul>
            <li>操作</li>
            <li>标题</li>
            <li>歌手</li>
            <li>专辑</li>
            <li>时间</li>
            <li>热度</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    }
};
</script>
<style lang="less" scoped>
.gonn {
  .tobu {
    height: 35px;
    // border: 1px solid #000;
    //   width: 100%;

    margin-left: 50px;
    .daohantilti {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        li {
          height: 100%;
          &:nth-child(1) {
            width: 70px;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          &:nth-child(2) {
            // flex: 1;
            width: 30%;
            // height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(3) {
            width: 18%;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(4) {
            width: 20%;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(5) {
            flex: 1;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(6) {
            width: 18%;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}

.geqlbiao:hover {
  background-color: rgba(202, 201, 201, 0.363);
}
.geqlbiao {
  .tobu {
    height: 35px;
    // border: 1px solid #000;
    //   width: 100%;

    margin-left: 50px;
    .daohantilti {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        li {
          height: 100%;
          &:nth-child(1) {
            width: 70px;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(2) {
            // flex: 1;
            width: 30%;
            // height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(3) {
            width: 18%;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(4) {
            width: 20%;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(5) {
            flex: 1;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
          &:nth-child(6) {
            width: 18%;
            height: 100%;
            border: 1px solid #000;
            display: flex;
            // justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>